﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<style>
    body {
        margin: 10px;
    }

    .demo-carousel {
        height: 200px;
        line-height: 200px;
        text-align: center;
    }

    .layui-table-tool-self {
        display: none;
    }
</style>

<div class="layui-inline ">
    客户编码：
    <div class="layui-inline ">
        <input class="layui-input layui-input-inline" name="code" id="code" />
    </div>
    客户名称：
    <div class="layui-inline ">
        <input class="layui-input layui-input-inline" name="name" id="name" />
    </div>
    客户简称：
    <div class="layui-inline ">
        <input class="layui-input layui-input-inline" name="forshort" id="forshort" />
    </div>
    <button type="button" id="btnSearch" class="layui-btn layui-btn-normal">查询</button>
    <button type="button" class="layui-btn layui-btn-primary"
            lay-on="test-page">
        新增
    </button>
    <button type="button" class="layui-btn  layui-btn-warm">删除</button>
    <button type="button" class="layui-btn  layui-btn-normal">导入</button>
    <button type="button" class="layui-btn  layui-btn-normal">导出</button>
</div>

<table class="layui-table" id="ID-table-demo-theads-2"></table>

<script type="text/html" id="btn">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

<script>

    layui.use(['layer','table','form'], function () {
            var table = layui.table;

       //弹出层
       var $ = layui.$;
       var layer = layui.layer;
       var util = layui.util;
       var form = layui.form;

       //form表单（添加）
        var form = layui.form;
       var layer = layui.layer;

       var funtable = function(){
           table.render({
                       url:"/CustomerManagement/GetCustomerManagement",
                       where:{
                           code:$("#code").val(),
                           name:$("#name").val(),
                           forshort:$("#forshort").val(),
                           pageIndex:1,
                           pageSize:10
                       },
                       elem: '#ID-table-demo-theads-2',
                       cols: [[
                           { type: 'checkbox', fixed: 'left' },
                           {field: 'customerCode', title: '客户编码'},
                           {field: 'customerName', title: '客户名称'},
                           {field: 'customerAbbreviation', title: '客户简称'},
                           {field: 'customerType', title: '客户类型',templet:function(x)
                               {
                                   const typeMap = {
                                                   1: "企业客户",
                                                   2: "个人客户",
                                                   3: "未知类型"
                                               };
                                               return typeMap[x.customerType];

                               },
                           },
                           {field: 'customerPhone', title: '客户电话'},
                           {field: 'contactName', title: '联系人'},
                           {field: 'contactPhone', title: '联系人-电话'},
                           {field: 'state', title: '是否启用',
                           templet: function (d)
                               {
                                   return d.state ? "是" : "否"
                               }
                           },
                           { title: '操作', width: 160, toolbar: '#btn', fixed: 'right' }
                   ]],
                   page: true, //是否显示分页
                   height: 500,
                   limits: [10, 20, 30],
                   limit: 10, //每页默认显示的数量
                   parseData: function(res){
                       return{
                           code: res.code,
                       count: res.count,
                       data: res.data
                       };
                   },
                   });
       }

        funtable()

        $("#btnSearch").on("click",function(){
           funtable()
       })

       // 事件
       util.on('lay-on', {
         'test-page': function () {
           layer.open({
             type: 2,
             area: ['800px', '500px'], // 宽高
             content: '/CustomerManagement/CustomerManagementAdd',
           });
         },
             success: function () {
               // 对弹层中的表单进行初始化渲染
               form.render();
               // 表单提交事件
               form.on('submit(demo-login)', function (data) {
                 var field = data.field; // 获取表单字段值
                 // 显示填写结果，仅作演示用
                 layer.alert(JSON.stringify(field), {
                   title: '当前填写的字段值',
                 });
                 // 此处可执行 Ajax 等操作
                 // …
                 return false; // 阻止默认 form 跳转
               });
             },
       });

       // 监听表格工具条
       table.on('tool(ID-table-demo-theads-2)', function(obj){
           var data = obj.data;
           console.log('当前行数据:', data); // 添加调试日志

           if(obj.event === 'delete'){
               layer.confirm('确定要删除该客户吗？', function(index){

                   deleCust(data.id);
                   layer.close(index);
               });
           } else if(obj.event === 'detail'){
               layer.open({
                   type: 2,
                   title: '修改客户信息',
                   area: ['800px', '500px'],
                   content: '/CustomerManagement/Sel',
                   success: function(layero, index){
                       var iframeWindow = window['layui-layer-iframe' + index];
                       // 等待iframe加载完成后再调用子页面方法
                       setTimeout(function() {
                           if (iframeWindow.loadData) {
                               iframeWindow.loadData(data.id);
                           }
                       }, 500);
                   }
               });
           }
       });

       // 批量删除按钮点击事件
       $('.layui-btn-warm').on('click', function(){
           var checkStatus = table.checkStatus('ID-table-demo-theads-2');
           var data = checkStatus.data;
           if(data.length === 0){
               layer.msg('请选择要删除的数据');
               return;
           }
           layer.confirm('确定删除选中的 '+ data.length +' 条数据吗？', function(index){
               var ids = data.map(item => item.id );
               console.log(ids);
               // deleCust(ids);
               // layer.close(index);
               $.ajax({
               url: '/CustomerManagement/DeleAll',
               type: 'post',
               data: { ids: ids.toString() },
               dataType: 'json',
               success: function (res) {
                   console.log(res)
                   if(res > 0){
                       layer.msg('删除成功');
                       funtable(); // 刷新表格
                   }else{
                       layer.msg(res.msg || '删除失败');
                   }
               },
               error: function (xhr, status, error) {
                   layer.msg('删除失败：' + error);
                   console.error("请求失败：" + status + " " + error);
               }
           });
           });
       });

       // 删除客户方法
       var deleCust = function(ids){
           console.log("删除客户ID：",ids);
           $.ajax({
               url: '/CustomerManagement/DeleteCustomerManagement',
               type: 'post',
               data: { id: ids },
               dataType: 'json',
               success: function (res) {
                   console.log(res)
                   if(res > 0){
                       layer.msg('删除成功');
                       funtable(); // 刷新表格
                   }else{
                       layer.msg(res.msg || '删除失败');
                   }
               },
               error: function (xhr, status, error) {
                   layer.msg('删除失败：' + error);
                   console.error("请求失败：" + status + " " + error);
               }
           });
       }
       });

</script>


